import React, {useMemo} from 'react';
import ProForm, {
  ProFormSelect,
  ProFormText,
  ModalForm
} from '@ant-design/pro-form';
import { Modal } from 'antd';

const UpdateForm = (props) => {
  //console.log('update', props.values)
  const Form = () => useMemo(() => (
    <ProForm
      initialValues={props.values}
      onFinish={props.onSubmit}
    >
      <ProFormText
        label="用户ID"
        rules={[{required: true,message: '必填项',},]}
        width="md"
        name="userId"
        disabled
      />
      <ProFormText
        label="用户名"
        rules={[{required: true,message: '必填项',},]}
        width="md"
        name="userName"
      />
      <ProFormText
        label="昵称"
        rules={[{required: true,message: '必填项',},]}
        width="md"
        name="nickName"
      />
       <ProFormSelect
        label="用户类型"
        rules={[{required: true,message: '必填项',},]}
        width="md"
        name="userType"
        valueEnum={{
          '00': '系统用户',
        }}
      />
      <ProFormText
        label="邮箱"
        rules={[{required: true,message: '必填项',},]}
        width="md"
        name="email"
      /> 
        <ProFormText
        label="电话号码"
        rules={[{required: true,message: '必填项',},]}
        width="md"
        name="phonenumber"
      />
      <ProFormSelect
          label="性别"
        width="md"
        name="sex"
        rules={[{required: true,message: '必填项',},]}
        valueEnum={{
          0: '男',
          1: '女',
          3: '未知'
        }}
      />
      <ProFormText
        label="备注"
        rules={[{required: true,message: '必填项',},]}
        width="md"
        name="remark"
      />
    </ProForm>
  ), [props.values.userId])
  return (
    <Modal
      width={640}
      title="修改用户"
      open={props.updateModalVisible}
    // onVisibleChange={props.onVisibleChange}
    onCancel={() => {
      props.onCancel();
    }}
    footer={null}
  >
      <Form/>
    </Modal>
  );
};

export default UpdateForm;
